/* 搜索框 */
$('.sel_input>input').on('input',function(){
    const text = this.value
    $.ajax({
        url:'/shop_sel',
        data:{
            ajax: 1,
            csrf_token: 'c319200382fddb6a3387f297dea14840',
            logid: 3439079469256432605,
            fid: '0,1633741091629',
            _: new Date().getTime(),
            q: text,
        },
        dataType:'json',
        success:function(res){
            const arr = res.data[1].data
            let text = ''
            arr.forEach(item=>{
                text += `
                <li>
                    <span>
                        ${item.word}
                    </span>
                    <p>
                        约${item.skuSize}个
                    </p>
                </li>
                `
                
            })
            $(".sel_result").css('display','block')
            $(".sel_result").html(text)
        },
        error:function(err){
            $(".sel_result").html('暂无结果')
        }
    })
    
})
$('.sel_input>input').focus(function(){
    $('.sel_result').css('display','block')
})
$('.sel_input>input').blur(function(){
    $('.sel_result').css('display','none')
})

/* 再localstroage获取到商品数据 */
const foodsInfo = JSON.parse(localStorage.getItem('foodsId'))
console.log(foodsInfo)
let foodsInfoText = `
        <div id="box">
            <div id="food">
                <div id="show">
                    <img src="${foodsInfo.picUrl}" alt="">
                </div>
                <div id="list">
                    <img src="${foodsInfo.picUrl}" class="active list_img" data-show="${foodsInfo.picUrl}" data-big="${foodsInfo.picUrl}" >
                    <img src="../images/open2.jfif" class="list_img" data-show="../images/open2.jfif" data-big="../images/open2.jfif" >
                    <img src="../images/open3.jfif" class="list_img" data-show="../images/open3.jfif" data-big="../images/open3.jfif" >
                </div>
                <div id="tool"></div>
            </div>
            <div id="bigshow">
                <img src="${foodsInfo.picUrl}" alt="">
            </div>
        
        </div>
        <div class="foods_info_right">
            <h3>${foodsInfo.fullName}</h3>
            <p>价格 <span class="foods_info_price">￥${foodsInfo.price}${foodsInfo.pCurrency}</span></p>
            <p>起订量 <span>1台起订</span></p>
            <p>发货地<span>${foodsInfo.location}</span></p>
            <div class="gross">
                <span>数量</span>
                <div>
                    <span class="reduce">-</span>
                    <span class="number">1</span>
                    <span class="add">+</span>
                </div>
            </div>
            <div class="btn">
                <button style="background-color: orangered;" class="add_car">加入购物车</button>
                <button>立即购买</button>
                <button class="consult">在线咨询</button>
            </div>
        </div>
`
$('.foods_info').html(foodsInfoText)
$('.right_nav_bottom>.go_top').click(function(){
    $('html,body').animate({scrollTop:0},500)
})
/* 右侧导航栏购物车 */
$('.right_nav_top>.right_nav_car').click(function(){
    location.href =  './car.html'
})
/* 放大镜 */
class Enlarge{
    constructor(ele){
        this.ele = document.querySelector(ele)
        this.showfood = this.ele.querySelector("#show")
        this.list = this.ele.querySelector("#list")
        this.tool = this.ele.querySelector("#tool")
        this.bigshow = this.ele.querySelector("#bigshow")
        this.bg = this.bigshow.firstElementChild
        this.showfood_w = this.showfood.clientWidth
        this.showfood_h = this.showfood.clientHeight
        this.tool_W = parseInt(window.getComputedStyle(this.tool).width)
        this.tool_h = parseInt(window.getComputedStyle(this.tool).height)
        this.bg_w = parseInt(window.getComputedStyle(this.bg).width)
        this.bg_h = parseInt(window.getComputedStyle(this.bg).height)
        this.cal()
        this.mouseChange()
        this.changeImg()
        this.follow()
    }
    //计算放大显示框的大小
    cal(){
        this.bigshow_w = this.tool_W * this.bg_w / this.showfood_w
        this.bigshow_h = this.tool_h * this.bg_h / this.showfood_h
       this.bigshow.style.width = this.bigshow_w + "px"
       this.bigshow.style.height = this.bigshow_h + "px"
    }
    //鼠标移入移出事件
    mouseChange(){
        this.showfood.addEventListener("mouseover",()=>{
            this.tool.style.display="block"
            this.bigshow.style.display="block"
        })
        this.showfood.addEventListener("mouseout",()=>{
            this.tool.style.display="none"
            this.bigshow.style.display="none"
        })
    }
    //点击换图片
    changeImg(){
        this.list.addEventListener("click",(e)=>{
            e = e || window.event
            const target = e.target || e.srcElement
            if(target.className != "list_img") return
            let food_src = target.dataset.show
            let big_src = target.dataset.big
            for(let i = 0;i<this.list.children.length;i++){
                this.list.children[i].classList.remove("active")
            }
            target.classList.add("active")
            this.showfood.firstElementChild.src = food_src
            this.bg.src = big_src
        })
    }
    //放大镜跟随鼠标
    follow(){
        this.showfood.addEventListener("mousemove",(e)=>{
            e = e || window.event
            let mousex = e.offsetX
            let mousey = e.offsetY
            if(mousex < this.tool.clientWidth / 2) mousex = this.tool.clientWidth / 2
            if(mousey < this.tool.clientHeight / 2) mousey = this.tool.clientHeight / 2
            if(mousex > this.showfood.clientWidth - this.tool.clientWidth / 2) mousex = this.showfood.clientWidth - this.tool.clientWidth / 2
            if(mousey > this.showfood.clientHeight - this.tool.clientHeight/ 2) mousey = this.showfood.clientHeight - this.tool.clientHeight / 2
            this.tool.style.left = mousex - this.tool.clientWidth / 2 + "px"
            this.tool.style.top = mousey - this.tool.clientHeight / 2 + "px"
            this.bg.style.left = (mousex - this.tool.clientWidth / 2) * this.bigshow_w / this.tool_W * -1 + "px"
            this.bg.style.top = (mousey - this.tool.clientHeight / 2) * this.bigshow_h / this.tool_h * -1 + "px"
            
        })
    }
}
new Enlarge("#box")

/* 商品数量增加减少 */
$('.foods_info_right>.gross>div>.add').click(function(){
    let number = $('.foods_info_right>.gross>div>.number').text()
    number++
    $('.foods_info_right>.gross>div>.number').text(number)
})
$('.foods_info_right>.gross>div>.reduce').click(function(){
    let number = $('.foods_info_right>.gross>div>.number').text()
    if(number == 1) return
    number--
    $('.foods_info_right>.gross>div>.number').text(number) 
})

$('.foods_info_right>.btn>.add_car').click(function(){
    const info = {
        title:foodsInfo.fullName,
        img:foodsInfo.picUrl,
        price:foodsInfo.minValue,
        pCurrency:foodsInfo.pCurrency,
        fullProviderName:foodsInfo.fullProviderName
    }
    const carList = JSON.parse(window.localStorage.getItem('cart')) || []
    carList.push(info)
    window.localStorage.setItem('cart',JSON.stringify(carList))
    alert('添加成功')
})
